<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">WMS</a>
        </li>
        <li>
            <i class="fa fa-circle"></i>
            <a href="#">Outbound</a>
        </li>
        <li>
            <i class="fa fa-circle"></i>
            <a href="#">Pack</a>
        </li>
        <li>
            <i class="fa fa-circle"></i>
            <a href="#">Pick Pack Task</a>
        </li>
        <li>
            <i class="fa fa-circle"></i>
            <a href="#">Pack Order Detail</a>
        </li>
    </ul>
</div>
<div class="container-fluid" style="margin:15px">
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold"> Pack Order Detail</span>
            </div>
        </div>
        <div class="portlet-body form form-horizontal">
            <div class="note" style="border: 1px solid #217ebd;">
                <div class="row form-group">
                    <div class="col-md-3">
                        <label class="bold">Order:</label>
                        <label>{{order.orderId}}</label>
                    </div>
                    <div class="col-md-5">
                        <label class="bold">Material:</label>
                        <label ng-repeat="m in order.materials">{{getItemName(m.itemSpecId)}}&nbsp;</label>
                    </div>
                    <div class="col-md-4">
                        <label class="bold">Package:</label>
                        <label>{{getItemName(order.packagingType.itemSpecId)}}&nbsp; <b>{{order.packages.length}}</b>packages</label>
                    </div>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th> Item </th>
                            <th> Unit </th>
                            <th> Qty </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="itemLine in order.itemLines">
                            <td> {{getItemName(itemLine.itemSpecId)}}</td>
                            <td> {{getUnitName(itemLine.unitId)}} </td>
                            <td> {{itemLine.qty}} </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div ng-repeat="package in order.packages" style="padding:10px 0px;">
                <div style="font-size: 16px; color: #217ebd;">
                    <span><b>{{package.id}}</b></span>
                </div>
                <div class="table-scrollable">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th> Item </th>
                                <th> Unit </th>
                                <th> Qty </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="itemLine in package.packItemLines">
                                <td> {{getItemName(itemLine.itemSpecId)}}</td>
                                <td> {{getUnitName(itemLine.unitId)}} </td>
                                <td> {{itemLine.qty}} </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="height: 35px; margin-bottom: 10px;">
                <button type="button" class="btn blue" style="float:right;" ng-click="reOpen()" placeholder="Again Pack Order">ReOpen</button>
            </div>
        </div>
    </div>
</div>
